<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>demo1</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			text-decoration: none;
		}
		.main{
			width: 440px;
			height: 350px;
			background-color:#9CD2EB;
			margin: 200px auto; 
			padding-top: 10px;
			padding-left: 10px;
			border-radius: 3%;


		}
		.main .co{
			margin-bottom: 5px;
			width: 450px;
			height:64px;
			float: left;	
		}
		.main .co .bn{
			width: 100px;
			height: 64px;
			float: left;
			/*margin-left: 10px;*/
			margin-right: 10px;
			background-color: #FF9FA9;
			border-radius: 3%;
		}
		.main .co .xsp{
			width: 318px;
			height: 64px;
			float: left;
			background-color: #7AA7BB;
			border-radius: 3%;
		}
		.bn1{
			width: 100px;
			height: 64px;
			margin-right: 10px;
			float: left;
			background-color: #FFFFFF;
			border-radius: 3%;
		}
		.an{
			display: inline-block;
			width: 100px;
			height: 64px;
			font-weight: bold;
			font-size: 26px;
			text-align: center;
			line-height: 64px;
			border-radius: 3%;
		}
		.jg{
			background-color: #F2FF93;
		}
		.pm{
			display: inline-block;
			width: 300px;
			height: 64px;
			font-weight: bold;
			font-size: 30px;
			line-height: 64px;
		}
		.an:hover{
			background-color: rgba(223,207,153,0.5);
			font-size: 22px;

		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			btm=document.getElementsByClassName("bn1");
			xsp=document.getElementsByClassName("xsp")[0];
			str=[];
			for(i=0;i<btm.length;i++){
				dj(i);
			}
			function hq(n){
				str.push(n);
				console.log(str);
			}
			function dj(x){
				btm[x].onclick=function(){
					// alert(btm[x].textContent);
					n=btm[x].textContent;
					hq(n);
					//xsp.innerHTML+=str;
				}
			}
		}
	</script>
</head>
<body>
	<div class="main">
		<div class="co">
			<div class="bn"><a href="" class="an">c</a></div>
			<div class="xsp"><a href="" class="pm"></a></div>
		</div>
		<div class="co">
			<div class="bn1"><a href="" class="an">7</a></div>
			<div class="bn1"><a href="" class="an">8</a></div>
			<div class="bn1"><a href="" class="an">9</a></div>
			<div class="bn1"><a href="" class="an">+</a></div>
		</div>
		<div class="co">
			<div class="bn1"><a href="" class="an">4</a></div>
			<div class="bn1"><a href="" class="an">5</a></div>
			<div class="bn1"><a href="" class="an">6</a></div>
			<div class="bn1"><a href="" class="an">-</a></div>
		</div>
		<div class="co">
			<div class="bn1"><a href="" class="an">1</a></div>
			<div class="bn1"><a href="" class="an">2</a></div>
			<div class="bn1"><a href="" class="an">3</a></div>
			<div class="bn1"><a href="" class="an">÷</a></div>
		</div>
		<div class="co">
			<div class="bn1"><a href="" class="an">0</a></div>
			<div class="bn1"><a href="" class="an">.</a></div>
			<div class="bn1"><a href="" class="an jg">=</a></div>
			<div class="bn1"><a href="" class="an">×</a></div>
		</div>
	</div>
</body>
</html>